<template>
    <el-card>
        <template #header>
            成员管理
        </template>
        <el-button type="primary" @click="dialogVisible = true">新建</el-button>


        <el-form :inline="true">
            <el-form-item label="用户名">
                <el-input v-model="selectFrom.username" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="selectFrom.rid" style="width: 200px;" clearable>
                    <el-option v-for="item in roleData" :label="item.rolename" :value="item.id" :key="item.id"
                        style="width: 200px;">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button :icon="Search" circle type="primary" @click="getData" />
            </el-form-item>
        </el-form>

        <el-table :data="managerData">
            <el-table-column label="ID" prop="id">
            </el-table-column>
            <el-table-column label="角色名称" prop="rolename">
            </el-table-column>
            <el-table-column label="用户名称" prop="username">

            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="warning" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-row style="height:60px;" align="middle" justify="center">
            <el-pagination background layout="prev, pager, next" :total="total" v-model:page-size="limit"
                v-model:current-page="page" @current-change="getData" />
        </el-row>
        <!-- 添加弹框 -->
        <el-dialog v-model="dialogVisible" title="新增用户" width="500">
            <el-form label-width="80px" :model="addForm" :rules="rules" ref="formIns">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="角色名" prop="rid">
                    <el-select v-model="addForm.rid" style="width: 200px;" clearable>
                        <el-option v-for="item in roleData" :label="item.rolename" :value="item.id" :key="item.id"
                            style="width: 200px;">

                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        

        <!-- 编辑弹框 -->
        <el-dialog v-model="dialogVisible2" title="编辑" width="500" >
            <el-form label-width="80px" :model="editForm"  ref="formIns2">
                <el-form-item label="用户名称" prop="rolename">
                    <el-input v-model="editForm.username"></el-input>
                </el-form-item>
                <el-form-item label="角色名" prop="rid">
                    <el-select v-model="editForm.rolename" style="width: 200px;" clearable>
                        <el-option v-for="item in roleData" :label="item.rolename" :value="item.id" :key="item.id"
                            style="width: 200px;">

                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit2">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>


</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getManager, getRole, addManager, delManager,edtManager } from '@/api/api';
import type { FormRules, FormInstance } from "element-plus"
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
const managerData = ref<ManagerData[]>([]);
const page = ref(1);
const limit = ref(5);
const total = ref(0);
const getData = async () => {
    let option: ManagerQuery = {
        page: page.value,
        limit: limit.value,
    }
    if (selectFrom.username) {
        option.username = selectFrom.username;
    }
    if (selectFrom.rid) {
        option.rid = selectFrom.rid;
    }
    const res = await getManager(option)
    managerData.value = res.data.data;
    total.value = res.data.total;
}
const roleData = ref<RoleData[]>();
onMounted(async () => {
    getData();
    const res = await getRole({ page: 1, limit: 20 });
    roleData.value = res.data.data;
})
const selectFrom = reactive({
    rid: 0,
    username: ""
})

// 新增
const dialogVisible = ref(false)
const rules: FormRules = {
    username: { required: true, message: "请输入用户名", trigger: "blur" },
    rid: { required: true, message: "请输入角色", trigger: "blur" }
}

// 删除
const handleDelete = async (id: number) => {

    try {
        await ElMessageBox.confirm(
            '确认删除当前角色吗',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        const res = await delManager(id);
        if (res.data.code === 200) {
            ElMessage.success("删除成功");
            getData();
        } else {
            ElMessage.error("删除失败");
        }
    } catch (e) {
        ElMessage.info("取消删除")
        console.log(e);

    }
}
// 新增数据
const addForm = ref<ManagerForm>({
    username: "",
    rid: null

});
const formIns = ref<FormInstance>();
const handleSubmit = async () => {
    await formIns?.value?.validate();
    const res = await addManager(addForm.value);
    if (res.data.code === 200) {
        ElMessage.success("添加成功");
        dialogVisible.value = false;
        formIns.value?.resetFields();
        getData();
    }
}
// 编辑
let eidtid = 0;
const formIns2 = ref<FormInstance>();
const dialogVisible2 = ref(false);
const handleEdit = (body: RoleData) => {
    dialogVisible2.value = true;
    eidtid = body.id;
    editForm.username = body.username;
}
const editForm = reactive<RoleForm>({
    rolename: null,
    username:"",
});

const handleSubmit2 = () => {
    formIns2.value?.validate(async valid => {
        if (valid) {
            const res = await edtManager(eidtid,editForm)
            if (res.data.code === 200) {
            dialogVisible2.value=false;
            getData();
            ElMessage.success("编辑成功");
        } else {
            ElMessage.error("编辑失败");
        }
        }
    })
}
</script>
<style scoped></style>